<script setup>
import { ref, onMounted } from "vue"
import { useCounterStore } from '@/stores/list'
import { storeToRefs } from 'pinia'

const show = ref(true)

const counterStore = useCounterStore()
const { giftList, gettedGift } = storeToRefs(counterStore)

const randomGift = giftList.value[Math.floor(Math.random() * giftList.value.length)]

// 把结果放到gettedGift里
gettedGift.value.push(randomGift)


// 删除列表内的
giftList.value.splice(giftList.value.indexOf(randomGift), 1)

onMounted(() => {
    setTimeout(() => {
        show.value = false
    }, 1500);
})

// 抽奖时间设置当前时间
const now = new Date()
const year = now.getFullYear()
const month = (now.getMonth() + 1).toString().padStart(2, '0')
const date = now.getDate().toString().padStart(2, '0')
const hour = now.getHours().toString().padStart(2, '0')
const minute = now.getMinutes().toString().padStart(2, '0')
const second = now.getSeconds().toString().padStart(2, '0')
const time = `${year}-${month}-${date} ${hour}:${minute}:${second}`
</script>

<template>
    <div class="container">
        <div class="img-container" v-if="show">
            <img src="@/assets/img/openGift.gif" alt="">
        </div>
        <!-- 卡片，显示抽奖结果 -->

        <div class="card" v-if="!show">
            <div class="card-body">
                <h5 class="card-title">恭喜你抽到了</h5>
                <p class="card-text">{{ randomGift }}</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">抽奖时间：{{ time }}</small>
            </div>
            <!-- 确定按钮，点击关闭整个openGift页面 -->

            <button class="btn btn-primary" @click="$emit('close')">确定</button>
        </div>

    </div>

</template>

<style scoped>
.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #383838;
    display: flex;
    justify-content: center;
    align-items: center;

    /* 图片居中 */
    img {
        width: 500px;
        height: 500px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%;
        z-index: 9999;
    }

    /* 卡片居中，背后要有高亮效果，显示礼物很高贵，特别显示礼物名字 */
    .card {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 20px;
        text-align: center;
    }

    .card-title {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .card-text {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .card-footer {
        font-size: 14px;
        margin-top: 10px;
    }

}
</style>